<template>
  <div class="fix-all waiting-order">
    <toast v-show="toastShow">下单完成</toast>
    <toast type="loading" v-show="loadingToastShow">正在下单</toast>
    <div v-show="errorToastShow" class="error-toast">
            <div class="weui_mask_transparent"></div>
            <div class="weui_toast">
                <i class="weui_icon_clear "></i>
                <p class="weui_toast_content">下单失败</p>
            </div>
        </div>
  </div>
</template>


<script type="text/javascript">
  export default{
    data:  function(){
      return {
        toastShow: false,
        loadingToastShow: true,
        errorToastShow: false
      }
    },
    ready: function(){
      this.$on('dataReturn', function (b) {
        if(b){
          this.toastShow = true;
          this.loadingToastShow = false;
        }else {
          this.errorToastShow = true;
          this.loadingToastShow = false;
        }
      });
    },
    components: {
      'toast': require('../components/toast/toast')
    }
  }
</script>

<style lang='sass'>
  .waiting-order{background: rgba(0,0,0,0);z-index: 5;}
  .waiting-order .error-toast .weui_icon_clear{position: absolute;transform:translateX(-50%)}
  .waiting-order .error-toast .weui_icon_clear:before{padding-top: 20px;font-size: 40px}
  .waiting-order .error-toast .weui_toast_content{margin-top: 64%;margin-bottom: 0;font-size: 14px;}
</style>
